<template>
    <div class="select-data">
        <div class="sign-success">
            <div class="sign-success-text">快捷选时间</div>
            <div class="course-name">课程：{{currentCourse.course && currentCourse.course.name}}</div>
            <div class="course-time">开课时间：{{startDate}}</div>
        </div>
        <div class="course-list">
            <div class="course-item" v-for="(item,key) in timeList" :key="key+'timeList'">
                <div class="select-title">
                    <div class="mock-icon"></div>
                    <div class="select-title-time">上课时间{{key+1}}</div>
                    <div class="select-title-delete" @click='deleteTimeItem(key)'>删除</div>
                </div>
                <div class="course-time-item flex-row">
                    <div class="left-text">开始时间</div>
                    <div class="right-text" @click="showDateModal(true,key,'s')">
                        <span>{{item.start || '请选择开始时间'}}</span><span class="right-text-icon">&gt;</span>
                    </div>
                </div>
                <div class="course-time-item flex-row">
                    <div class="left-text">结束时间</div>
                    <div class="right-text" @click="showDateModal(true,key,'e')">
                        <span>{{item.end || '请选择结束时间'}}</span><span class="right-text-icon">&gt;</span>
                    </div>
                </div>
                <div class="course-time-item flex-row">
                    <div class="left-text">上课星期</div>
                    <div class="right-text" @click="showWeekSelect(true,key)">
                        <span>{{weekArr[item.week] || '请选择星期'}}</span><span class="right-text-icon">&gt;</span>
                    </div>
                </div>
                <div class="course-time-item flex-row">
                    <div class="left-text">上课时间</div>
                    <div class="right-text" @click='showTimeSelect(true,key)'>
                        <span>{{timeArr[item.time] || '请选择上课时间'}}</span><span class="right-text-icon">&gt;</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="add-course-item flex-row">
            <div class="add-btn" @click="addTime">新增一节</div>
        </div>
        <div class="select-submit">
            <div class="submit-btn" :class="{'disable':!canSubmit}" @click="submitCourseTime">提交</div>
        </div>
        <modal v-show="deleteTime">
            <div class="modal-delete-time">
                <div class="course-time-hint">
                    <div>确认删除该节上课时间？</div>
                </div>
                <div class="course-time-btn"  @click="showDeleteTime(false)">取消</div>
                <div class="cancel-delete"><span>确认删除</span></div>
                <div class="course-time-icon"><img src="/static/h5img/LOGO.png" alt=""></div>
            </div>
        </modal>
        <modal v-show="dateModal">
            <div class="select-date-content">
                <div class="select-date-title flex-row">
                    <div class="title-text">{{selectTimeText}}</div>
                    <div class="title-close" @click="showDateModal(false,'','')"><img src="../../../static/h5img/guanbi.png" alt=""></div>
                </div>
                <van-datetime-picker
                v-model="currentDate"
                :show-toolbar="false"
                :min-date="minDate"
                :max-date="maxDate"
                type="date"
                ref='van-datetime-picker'
                />
                <div class="confirm-content">
                    <div class="confirm-btn" @click="submitSelectTime">确认</div>
                </div>
            </div>
        </modal>
        <modal v-show="weekModal">
            <div class="select-week-content">
                <div class="select-week-close" @click="showWeekSelect(false,'')"><img src="../../../static/h5img/guanbi.png" alt=""></div>
                <div class="select-week-title">选择星期</div>
                <div class="week-item" :class="{'weekSelected': weekSelected === key}" v-for="(item,key) in weekArr" :key="key+'weekArr'" @click="selectWeekFn(key)">{{item}}</div>
            </div>
        </modal>
        <modal v-show="timeModal">
            <div class="select-week-content">
               <div class="select-week-close" @click="showTimeSelect(false,'')"><img src="../../../static/h5img/guanbi.png" alt=""></div>
               <div class="select-week-title">选择上课时间</div>
               <div class="week-item" :class="{'weekSelected': timeSelected === key}" v-for="(item,key) in timeArr" :key="key+'timeArr'" @click="selectTimeFn(key)">{{item}}</div>
            </div>
        </modal>
    </div>
</template>

<script>
import store from '../../store/index.js'
import moment from 'moment'
import modal from './h5Modal'
import { Toast } from 'vant';
import { formatCourseList } from 'plus/unconfirmPack'
import {classPlan, submitCalendars} from 'api/getData'
import { mapGetters } from 'vuex'
import fastSelect from 'plus/mixins/fastSelect';
export default {
    // beforeRouteEnter (to, from, next) {
    //     if(store.getters.isLogin){
    //         next()
            
    //     }else{
    //         next('H5Login')
    //     }
    //     if(to.query.id && to.query.hcId){
    //         next()
    //     }else{
    //         Toast.fail({
    //         duration: 2000, message:'无效路径'
    //         })
    //         setTimeout(()=>{
    //             Toast.clear()
    //             next('/classPlan/classList')
    //         }, 2000)     
    //     }
    // },
    mixins: [fastSelect],
    data() {
        return {
           
        }
    },
    components:{
        modal
    }
}

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';
.select-data{
    background:rgba(247,247,247,1);
    min-height:80vh;
    padding-bottom:15.8rem;
}
.sign-success{
    background:rgba(255,255,255,1);
    padding: 4rem 3rem;
    margin-bottom: 3rem;
    .sign-success-text{
        font-size:4.2rem;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(22,22,22,1);
        margin-bottom: 3rem;
    }
    .course-name,.course-time{
        font-size:3rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(22,22,22,1);
        
    }
    .course-name{
        margin-bottom: 2rem;
    }
}
.select-submit{
    padding: 3rem;
    background:rgba(255,255,255,1);
    width: 100%;
    position: fixed;
    z-index: 100;
    box-sizing:border-box;
    bottom:0;
    .submit-btn{
        height:9.8rem;
        line-height: 9.8rem;
        text-align: center;
        background:rgba(255,36,13,1);
        border-radius:0.4rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
    .disable{
        opacity:0.5;
    }
}
.course-list{
    padding-bottom:3rem;
}
.course-item{
    background:rgba(255,255,255,1);
    margin-bottom: 3rem;
    padding: 0 3rem;
    .select-title{
        height:11.6rem;
        line-height 11.6rem;
        >div{
            display:inline-block;
            vertical-align:middle;
        }
        .mock-icon{
            width:1rem;
            height:3.6rem;
            background:rgba(255,36,13,1);
            border-radius:0.5rem;
        }
        .select-title-time{
            margin-left:1rem;
            font-size:3.6rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(22,22,22,1);
        }
        .select-title-delete{
            float:right; 
            font-size:3rem;
            font-family:SourceHanSansCN-Regular;
            font-weight:400;
            color:rgba(164,164,164,1);
        }
    }
}
.course-time-item{
    height:11.6rem;
    line-height:11.6rem;
    justify-content:space-between;
    align-items:center;
}
.left-text{
    font-size:3.2rem;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(30,30,30,1);
}
.right-text{
    font-size:3.2rem;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(30,30,30,1);
    .right-text-icon{
        margin-left:1rem;
        color:rgba(164, 164, 164, 1);
        font-size:4rem;
    }
}
.add-course-item{
    padding-bottom:9rem;
    justify-content:center;
    align-items:center;
    .add-btn{
        text-align: center;
        width:51rem;
        height:8.2rem;
        line-height:8.2rem;
        border-radius:4.1rem;
        border:0.1rem solid rgba(255,42,10,1);
        font-size:3.2rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,36,13,1);
    }
}
.select-date-content{
    position:absolute;
    bottom:0;
    width:100%;
    height:80.2rem;
    box-sizing:border-box;
    background:rgba(255,255,255,1);
    
}
.select-date-title{
    height:11rem;
    line-height:11rem;
    padding:0 3rem;
    justify-content:space-between;
    align-items:center;
    .title-text{
        font-size:3.4rem;
        font-family:SourceHanSansCN-Bold;
        font-weight:bold;
        color:rgba(30,30,30,1);
    }
    .title-close{
        img{
            width:2.6rem;
            height:2.6rem;
        }
    }
}
.confirm-content{
    position:absolute;
    bottom:0;
    padding:3rem;
    box-sizing:border-box;
    width:100%;
    height:15.8rem;
    line-height:15.8rem;
    background:rgba(255,255,255,1);
    .confirm-btn{
        height:9.8rem;
        line-height:9.8rem;
        text-align:center;
        background:rgba(255,36,13,1);
        border-radius:0.4rem;
        font-size:3.6rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
    }
}
.modal-delete-time{
    position: absolute;
    width:61rem;
    height:48.4rem;
    background:rgba(255,255,255,1);
    border-radius:2.6rem;
    top:50%;
    left 50%;
    margin-top: -24.2rem;
    margin-left: -30.5rem;
    padding: 0 5rem;
    box-sizing: border-box;
}
.course-time-icon{
    position: absolute;
    box-sizing: border-box;
    width:13rem;
    height:13rem;
    top: -3rem;
    left: 50%;
    margin-left: -6.5rem;
    // border: 1rem solid rgba(255,255,255,1);
    border-radius: 50%;
    background:rgba(255,255,255,1);
    img{
        width: 100%;
        height: 100%;
    }

}
.course-time-hint{
    margin-top: 15rem;
    line-height:5.4rem;
    text-align: center;
    >div{
        font-size:3.4rem;
        font-family:SourceHanSansCN-Regular;
        font-weight:400;
        color:rgba(30,30,30,1);
    }
}
.course-time-btn{
    text-align: center;
    margin-top: 7rem;
    height:8.2rem;
    line-height: 8.2rem;
    background:rgba(255,36,13,1);
    border-radius:4.1rem;
    font-size:3.2rem;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
}
.cancel-delete{
    text-align:center;
    margin-top:4rem;
    font-size:2.8rem;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(164,164,164,1);
}
.select-week-content{
    width:100%;
    position:absolute;
    bottom:0;
    background:rgba(255,255,255,1);
}
.select-week-title{
    height:11.4rem;
    line-height:11.4rem;
    font-size:3.4rem;
    font-family:SourceHanSansCN-Bold;
    font-weight:bold;
    color:rgba(30,30,30,1);
    padding-left:3rem;
}
.select-week-close{
    position: absolute;
    top:3rem;
    right:3rem;
    img{
        width:2.6rem;
        height:2.6rem;
    }
}
.week-item{
    height:11.6rem;
    line-height:11.6rem;
    padding-left:3rem;
    font-size:3rem;
    font-family:SourceHanSansCN-Regular;
    font-weight:400;
    color:rgba(30,30,30,1);
}
.weekSelected{
    color:rgba(255,36,13,1);
}

</style>